import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MyApp1());
}

class MyApp extends StatelessWidget{

  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
          title:Text("标题"),
          ),
          body:WidgetTextDemo(),
        ),
        
    );
  }
}

class HomeContent extends StatelessWidget{

  @override
  Widget build(BuildContext context){
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Checkbox(
                value:true,
                onChanged: (value)=>print("hello world"),
              ),
               Text(
                "同意协议",
                textDirection:TextDirection.ltr,
                style:TextStyle(fontSize: 20)
        ),


            ],
      ),
    );
  }
}

class TextFieldDemoContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(20),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          TextFieldDemo()
        ],
      ),
    );
  }
}

class TextFieldDemo extends StatefulWidget {
  @override
  _TextFieldDemoState createState() => _TextFieldDemoState();
}
class _TextFieldDemoState extends State<TextFieldDemo> {

  final textEditingController=TextEditingController();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    //1、设置默认值
    textEditingController.text="Hello World";
    // 2.监听文本框
    textEditingController.addListener((){
      print("textEditingController:${textEditingController.text}");
    });
  }
  @override
  Widget build(BuildContext context) {
    return TextField(
      decoration: InputDecoration(
        icon: Icon(Icons.people),
        labelText: "username",
        hintText: "请输入用户名",
        border: InputBorder.none,
        filled: true,
        fillColor: Colors.lightGreen
      ),
      onChanged: (value) {
        print("onChanged:$value");
      },
      onSubmitted: (value) {
        print("onSubmitted:$value");
      },
    );
  }
}


class ProductItem extends StatelessWidget{
//创建三个成员变量保存父Widget传入的数据
final String title;
final String desc;
final String imageUrl;

ProductItem(this.title,this.desc,this.imageUrl);

  @override
  Widget build(BuildContext context){
    /*
    希望给所有的商品也添加一个内边距，并且还有边框:
    我们可以使用一个Container的Widget，它里面有padding属性，并且可以通过decoration来设置边框；
     */
    return Container(
      padding: EdgeInsets.all(20),
      decoration: BoxDecoration(
        border: Border.all()
       ),
       child: Column(
      children: [
        Text(title,style:TextStyle(fontSize:20)),
        Text(desc,style:TextStyle(fontSize:18)),
        /*
        希望给图片和文字之间添加一些间距:
        方式一：给图片或者文字添加一个向上的内边距或者向下的内边距；
        方式二：使用SizedBox的Widget，设置一个height属性，可以增加一些距离；
        */
        SizedBox(height: 10,),
        Image.network(imageUrl)
      ],
    ),
    );
    
    
  }
}


class MyApp1 extends StatelessWidget{

  @override
  Widget build(BuildContext context){
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.blueAccent
      ),

      home:Scaffold(
        appBar: AppBar(
          title:Text("标题"),
          ),
          body:FormDemo(),
        ),
        
    );
  }
}

class HomeContent1 extends StatelessWidget{

  @override
  Widget build(BuildContext context){
    //ListView可以让自己的子Widget变成滚动的效果
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: ListView(
      children: [
        ProductItem("Apple1", "Macbook Product1", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg"),
        ProductItem("Apple2", "Macbook Product2", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72imm9u5zj30u00k0adf.jpg"),
        ProductItem("Apple3", "Macbook Product3", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72imqlouhj30u00k00v0.jpg")
      ],
    ),
    ); 
    
    
  }
}


class MyCounterWidget extends StatefulWidget{
MyCounterWidget() {
    print("执行了MyCounterWidget的构造方法");
  }

  @override
  State<StatefulWidget> createState(){
    print("执行了MyCounterWidget的createState方法");
    //  将创建的State返回
    return MyCounterState();
  }
}

class HomeBody extends StatelessWidget{
  @override
  Widget build(BuildContext context){
        print("HomeBody build");
        return MyCounterWidget();
  }
}

class WidgetImageDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context){
        return Center(
        child: Container(
          width: 300,
          height: 300,
          color: Colors.yellow,
          child: Image.asset("images/1.JPG"),
            // child: Image.network(
            //   "http://img0.dili360.com/ga/M01/48/3C/wKgBy1kj49qAMVd7ADKmuZ9jug8377.tub.jpg",
            //   alignment: Alignment.topCenter,
            //   repeat: ImageRepeat.repeatY,
            //   color: Colors.red,
            //   colorBlendMode: BlendMode.colorDodge,
            // )
        //     ,
          
        // width: 300,
        // height: 300,
        // color: Colors.yellow,
      
      ),
    );
  }
}

/**
 * 
 */
class WidgetButtonDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context){
        
        return Column(
      children: <Widget>[
        FloatingActionButton(
          child: Text("FloatingActionButton"),
          onPressed: () {
            print("FloatingActionButton Click");
          },
        ),
        RaisedButton(
          child: Text("同意协议", style: TextStyle(color: Colors.white)),
          color: Colors.orange, // 按钮的颜色
          highlightColor: Colors.orange[700], // 按下去高亮颜色
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)), // 圆角的实现
          onPressed: () {
            print("同意协议");
  },
        ),
        FlatButton(
          child: Text("FlatButton"),
          onPressed: () {
            print("FlatButton Click");
          },
        ),
        OutlineButton(
          child: Text("OutlineButton"),
          onPressed: () {
            print("OutlineButton Click");
          },
        )
      ],
    );
  }
}
/**
 * Text
 */
class WidgetTextDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Text.rich(
      TextSpan(
        children: [
          TextSpan(
            text: "《定风波》",
            style: TextStyle(
              fontSize: 25,
              fontWeight: FontWeight.bold,
              color: Colors.black
            )
          ),
          TextSpan(
            text: "苏轼",
            style: TextStyle(
              fontSize: 25,
              fontWeight: FontWeight.normal,
              color: Colors.redAccent
            )
          ),
          TextSpan(
            text: "\n莫听穿林打叶声，何妨吟啸且徐行。\n竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。",
            
          )
        ]
      ),
            style:TextStyle(
        
        fontSize:20,
        color: Colors.purple 
        ),
        textAlign: TextAlign.center,//所有内容都居中对齐
    );
    
    // Text(
    //   "《定风波》 苏轼 \n莫听穿林打叶声，何妨吟啸且徐行。\n竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。",
    //   textAlign: TextAlign.center,//所有内容都居中对齐
    //   maxLines: 3,//显然，“生。”被删除了
    //   overflow: TextOverflow.ellipsis,//超出部分显示...
    //   style:TextStyle(
        
    //     fontSize:20,
    //     color: Colors.purple 
    //     )
    // )
  }
}


class MyCounterState extends State<MyCounterWidget>{
  int counter=0;

  MyCounterState() {
    print("执行MyCounterState的构造方法");
  }

   @override
  void initState() {
    super.initState();
    print("执行MyCounterState的init方法");
  }

  @override
  void didChangeDependencies() {
    // TODO: implement didChangeDependencies
    super.didChangeDependencies();
    print("执行MyCounterState的didChangeDependencies方法");
  }

  @override
  void didUpdateWidget(MyCounterWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    print("执行MyCounterState的didUpdateWidget方法");
  }

  @override
  void dispose() {
    super.dispose();
    print("执行MyCounterState的dispose方法");
  }

@override
  Widget build(BuildContext context){
    print("执行执行MyCounterState的build方法");
    return Center(

      child:Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              RaisedButton(
                color: Colors.redAccent,
                child: Text(
                  "+1",
                  style:TextStyle(fontSize:18,color:Colors.white)
                ),
                onPressed: (){
                  setState(() {
                   counter++; 
                  });
                },
              ),
              RaisedButton(
                color: Colors.orangeAccent,
                child: Text(
                  "-1",
                  style:TextStyle(fontSize:18,color:Colors.white)
                ),
                onPressed: (){
                   setState(() {
                   counter--; 
                  });
                },
              )
            ],
          ),
          Text(
        "当前计数：$counter",
        style: TextStyle(fontSize: 30),
        ),
        ],
      ) 
      
      
    );
  }
}




class FormDemo extends StatefulWidget {
  @override
  _FormDemoState createState() => _FormDemoState();
}

class _FormDemoState extends State<FormDemo> {
/**
 * 我们有没有办法可以在点击按钮时，拿到 Form对象 来调用它的save方法呢？
 * 知识点：在Flutter如何可以获取一个通过一个引用获取一个StatefulWidget的State对象呢？
 * 答案：通过绑定一个GlobalKey即可。
 * 
 */
final registFromKey=GlobalKey<FormState>();

String username,password;

void registerForm(){
  //registFromKey.currentState可以获取它的state对象
registFromKey.currentState.save();
registFromKey.currentState.validate();

 print("username:$username password:$password");
}

  @override
  Widget build(BuildContext context) {
    return Form(
      key: registFromKey,

      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          TextFormField(
            decoration: InputDecoration(
              icon: Icon(Icons.people),
              labelText: "用户名或手机号"
            ),
            onSaved: (value) {
              this.username = value;
            },
            validator: (value){
              if(value.isEmpty){
                return "用户名或手机号不能为空";
              }
              return null;
            },
          ),
          TextFormField(
            obscureText: true,
            decoration: InputDecoration(
              icon: Icon(Icons.lock),
              labelText: "密码"
            ),
            onSaved: (value) {
              print("进入onSave方法");
              this.password = value;
            },
            validator: (value){
              if(value.isEmpty){
                return "密码不能为空";
              }
              return null;
            },
            //autovalidate: true,

          ),
          SizedBox(height: 16,),
          Container(
            width: double.infinity,
            height: 44,
            child: RaisedButton(
              color: Colors.lightGreen,
              child: Text("注 册", style: TextStyle(fontSize: 20, color: Colors.white),),
              // onPressed: () {
              //   print("点击了注册按钮");
              // },
              //一直不打印我输入的用户名和密码，原来是这里没有调用registerForm
              onPressed: registerForm,//这里调用的方法不能加括号
            ),
          )
        ],
      ),
    );
  }
}

